<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 400px;
            background: pink;
            margin: 0 auto;
            display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            align-items: center;
            text-align: center;
        }
        li{
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        ul li:nth-of-type(5){
            background: red;
            height: 100%;
            cursor: pointer;
        }
        .bg{
            background: yellow;
        }
    </style>
</head>
<body>

<ul>
    <li>谢谢惠顾</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li id="start">开始</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

</body>

<script>
    var list = [0,1,2,3,5,6,7,8]
    var start = document.getElementById('start')
    var ulLi = document.getElementsByTagName('li')
    var bgm = new Audio()
    bgm.src = 'https://sl-sycdn.kuwo.cn/081369630c90cf943fd31ecf572eafa2/5f446e69/resource/n2/25/91/2897793702.mp3'

    start.onclick = function () {
        bgm.currentTime = 7.5
        bgm.play()
        var timer = setInterval(()=>{
            var gezi = Math.floor(Math.random()*list.length)
            console.log(list[gezi])
            for (var i=0;i<ulLi.length;i++){
                ulLi[i].className = ''
            }
            ulLi[gezi].className = 'bg'
        },200)

        setTimeout(()=>{
            bgm.pause()
            clearInterval(timer)
        },3000)

    }

</script>

</html>